import { loginAPI } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  // 命名空间
  namespaced: true,
  state: { // 推荐写法为函数写法，但是写对象也行
    token: getToken() || ''
  },
  mutations: {
    // mutations中的方法，只有一种调用方式，store.commite（'mutations中的方法名'）
    setToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    removeToken(state) {
      // 清空vuex中的token
      state.token = ''
      // 清空cookie中的token
      removeToken()
    }

  },
  actions: {
    async loginAction(store, data) {
      const res = await loginAPI(data)
      // console.log(res)
      store.commit('setToken', res.data.token)
    }
  },
  getters: {

  }

}
// 使用语法： 如何在组件中使用子模块的各个数据和方法
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// 1. 使用state中的数据
// this.$store.state.模块名.数据项名
/*
computed: {
    ...mapState('模块名',['方法名1','方法名2',......])
}
*/
// 2.使用getters中的数据
// this.$store.getters['模块名/属性名']
/*
computed: {
    ...mapGetters('模块名',['方法名1','方法名2',......])
}
*/

// 3.使用mutations中的数据
// 1.this.$store.commit.('模块名/方法名',其他参数)
/*
computed: {
    ...mapMutations('模块名',['方法名1','方法名2',......])
}
*/

// 4.使用actions中的数据
// 1.this.$store.dispatch('模块名/方法名',其他参数)
/*
computed: {
    ...mapActions('模块名',['方法名1','方法名2',......])
}
*/
